<template>
  <div class="home">
    <div v-if="topicsList && topicsList.data" class="topics-list">
      <topic-item
        v-for="item in topicsList.data"
        :key="item.id"
        :topicInfo="item"
        :href="`/detail/`"
      />
      <pagination
        :current-page="$route.params.page"
        :total="topicsList.total"
        :href="'/index'"
        :page-size="10"
      ></pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import TopicItem from '../components/TopicItem'
import pagination from '../components/pagination.vue'
import updateTdk from '../utils/tdk'
export default {
  name: 'home',
  components: {
    TopicItem,
    pagination
  },
  data() {
    return {
      size: 100,
      page: 1
    }
  },
  computed: {
    ...mapState(['topicsList'])
  },
  //设置TDK
  tdk() {
    return {
      title: this.topicsList && this.topicsList.title,
      keywords: this.topicsList && this.topicsList.title,
      description: this.topicsList && this.topicsList.title,
      ssrHeadAddInfo: `<link rel="canonical" href="https://www.shui12366.com">`
    }
  },
  // 服务端生命周期
  serverPrefetch() {
    return this.fetchData()
  },
  // 客户端生命周期
  mounted() {
    if (process.env.NODE_ENV === 'development') {
      return this.fetchData()
    }
  },
  methods: {
    fetchData() {
      let data = {
        size: 10,
        page: this.$route.params.page ? this.$route.params.page : 1,
        operator: true,
        isIncludeFiles: 0,
        searchType: 'time'
      }
      this.$loading(true)
      return this.$store.dispatch('FETCH_TOPICS_LIST', { data }).finally(() => {
        this.$loading(false)
        updateTdk.call(this)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.topics-list {
  max-width: 800px;
  margin: 50px auto;
}
</style>
